<template>
    <div class="container">
        <div class="header">
            <span class="title">
                <i class="fa fa-circle-o" aria-hidden="true"></i>
                商品零售统计
            </span>
            <div class="count">
                <span>商品数量</span>
                <span>39049</span>
            </div>
        </div>
        <hr />

        <div class="detail">
            <ul>
                <div class="item">
                    <img src="../imgs/timo.jpg" style="width:40px">
                    <div class="goodname">商品名称</div>
                    <div>3541</div>
                </div>

            </ul>
            <ul>
                <div class="item">
                    <img src="../imgs/timo.jpg" style="width:40px">
                    <div class="goodname">商品名称</div>
                    <div>3541</div>
                </div>
            </ul>
            <ul>
                <div class="item">
                    <img src="../imgs/timo.jpg" style="width:40px">
                    <div class="goodname">商品名称</div>
                    <div>3541</div>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
module.exports = {

}
</script>

<style scoped>
.item :last-child {
    position: relative;
    margin-top: 12px;
}

.detail ul {
    position: relative;
    left: -10%;
}

.detail {
    width: 100%;
    height: 75%;
    position: relative;
    /* border: 1px solid paleturquoise; */
    top: -75%;
}


hr {
    top: 60px;
    position: absolute;
    width: 100%;
}

.header .count span {
    position: relative;
    margin-top: 5%;
    display: inline-block;

}

.container .detail .item span {
    margin-top: 1%;

}

.container .detail .item img {
    border-radius: 50%;
    overflow: hidden;
}

.container .detail .item .goodname {

    position: relative;
    margin-top: 12px;
}

.header .count {
    display: flex;
    width: 100%;
    height: 20%;
    /* border: 1px solid saddlebrown; */
    top: 10%;
    position: relative;
    justify-content: space-around;

}

.header {
    /* border: 1px solid saddlebrown; */
    width: 100%;
    height: 100%;
    border-radius: 15%;

}

.container {
    font-family: serif;
    /* border: 1px solid red; */
    width: 20%;
    height: 30%;
    position: absolute;
    left: 75%;
    top: 37%;
    border-radius: 15%;
    background-color: silver;
}

.header .title {
    position: absolute;
    left: 5%;
    top: 7%;
}

.title i {
    font-size: 20px;
}

.item {
    display: flex;
    justify-content: space-around;
}
</style>